<!-- 消息通知 -->
<template>
	<view>
		<scroll-view scroll-y="true" class="scrollStyle" @scrolltolower="scrolltolowerFn">
			<view>
				<view class="item" v-for="item in pageData" :key="item.id">
					<view class="time">{{item.add_time}}</view>
					<view class="box">
						<view class="txt1">{{item.title}}</view>
						<view class="txt2">{{item.content}}</view>
					</view>
				</view>
				<view style="padding:20rpx 0;">
					<u-loadmore :status="loadStatus" />
				</view>
			</view>
		</scroll-view>
		<!-- 弹窗 -->

	</view>
</template>

<script>
	import api from '@/commonJS/api.js';
	import common from '@/commonJS/common.js';
	export default {
		data() {
			return {
				myInfo: '', //我的信息
				pageData: [], //页面数据
				pageNum: 1, //分页
				loadStatus: 'loadmore', //加载状态
			}
		},
		onLoad() {
			if(uni.getStorageSync('userInfo')){
				this.myInfo = JSON.parse(uni.getStorageSync('userInfo'));
				console.log('我的信息', this.myInfo);
				this.getPageData();
			}else{
				uni.navigateTo({
					url:'/pagesLogin/login'
				});
			}
		},
		methods: {
			// 获取当前页面数据
			getPageData() {
				this.loadStatus = 'loading';
				const obj = {
					page: this.pageNum,
					limit: 10,
					uid: this.myInfo.uid
				}
				const _this = this;
				common.ajaxFn(api.im_xiaoxitongzhi, 'GET', obj).then((res) => {
					console.log('页面数据', res.data.data.list);
					if (res) {
						if (res.data.data.list.length < 10) {
							_this.loadStatus = 'nomore';
						} else {
							_this.loadStatus = 'loadmore';
						}
						if (_this.pageNum == 1) {
							_this.pageData = res.data.data.list;
						} else {
							_this.pageData = _this.pageData.concat(res.data.data.list);
						}
					}
				});
			},
			// 滚动到底
			scrolltolowerFn() {
				console.log('到底啦');
				this.pageNum++
				this.getPageData();
			},

		}
	}
</script>

<style lang="scss" scoped>
	.scrollStyle {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: #F5F5F5;

		.item {
			padding: 0 20rpx;

			.time {
				padding: 30rpx 0 20rpx 0;
				color: $gray-six;
				font-size: $font-sanshi;
				text-align: center;
			}

			.box {
				padding: 30rpx 16rpx 40rpx;
				background-color: #fff;
				border-radius: 20rpx;

				.txt1 {
					color: $gray-three;
					font-size: $font-sansi;
					font-weight: bold;
				}

				.txt2 {
					margin-top: 16rpx;
					color: $gray-six;
					font-size: $font-sanshi;
				}
			}
		}
	}
</style>